import './css-bfc-float.less';
export default () => (
  <>
    <div className="flex justify-center gap-4">
      <div>
        <h4>no bfc effect</h4>
        <div className="css-bfc-float">
          <div className="container">
            <div className="float">float</div>
          </div>
        </div>
        <h4 className="clear-both">浮动会导致高度为 0</h4>
      </div>
      <div className="div">.container .float</div>
      <div>
        <h4>bfc effect</h4>
        <div className="css-bfc-float">
          <div className="container bfc-effects">
            <div className="float">float</div>
          </div>
        </div>
      </div>
    </div>
    <h3>
      当同一个BFC中的两个盒子同时具有相对方向的外边距时，外边距会发生叠加(Margin
      Collapse)，当兄弟盒子的外边距不一样时，将以最大的那个外边距为准。
    </h3>
    <div className="margin-collapse">
      <div className="flex">
        <div className="flex-1">
          <div className="container">
            <div className="part"></div>
            <div className="part"></div>
            <div className="part"></div>
          </div>
        </div>
        <div className="flex-1">
          <div className="container">
            <div className="bfc">
              <div className="part"></div>
            </div>
            <div className="part"></div>
            <div className="part"></div>
          </div>
        </div>
      </div>
    </div>
  </>
);
